<%--
  Created by IntelliJ IDEA.
  User: mabo
  Date: 2010-2-10
  Time: 14:00:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>ComboBoxTest.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext/ext-base.js">
    </script>
    <script type="text/javascript" src="ext/ext-all.js">
    </script>
    <script type="text/javascript" src="ext/ext-lang-zh_CN.js">
    </script>
    <script>
        Ext.onReady(function() {
            Ext.QuickTips.init();
            var data = [
                ['1', 'Lislie', 'D005', 'male'],
                ['2', 'Merry', 'D004', 'female'],
                ['3', 'Edison', 'D003', 'male'],
                ['4', 'Mark', 'D002', 'male'],
                ['5', 'Leeon', 'D001', 'male']
            ];
            // 格式化数据
            var ds = new Ext.data.Store({
                proxy: new Ext.data.MemoryProxy(data), // 数据源
                reader: new Ext.data.ArrayReader({}, [
                    // 如何解析
                    {
                        name: 'id'
                    },
                    {
                        name: 'name'
                    },
                    {
                        name: 'depno'
                    },
                    {
                        name: 'sex'
                    }
                ])
            });
            ds.load();
            var storeList = new Ext.form.ComboBox({
                store: ds,
                fieldLabel: 'dfsfsd',
                allowBlank: false,
                forceSelection: true,
                valueField: 'id', // option.value
                typeAhead: true,
                displayField: 'name', // option.text
                triggerAction: 'all',
                emptyText: 'Select a store...',
                mode: 'local',
                selectOnFocus: true,
                width: 135
            });

            var folders = [
                {
                    'folderId': '1',
                    'folderName': '收信箱'
                },
                {
                    'folderId': '2',
                    'folderName': '发信箱'
                }
            ];
            //用于下拉列表的store
            var foldersJsonStore = new Ext.data.SimpleStore({
                fields: [
                    {
                        name: 'folderId',
                        mapping: 'folderId'
                    },
                    {
                        name: 'folderName',
                        mapping: 'folderName'
                    }
                ],
                data: folders
            });
            foldersJsonStore.loadData(folders);
            var combo = new Ext.form.ComboBox({
                fieldLabel: '文件夹',
                name: 'folderMoveTo',
                store: foldersJsonStore,
                displayField: 'folderName',
                valueField: 'folderId',
                mode: 'local',
                typeAhead: true, //自动将第一个搜索到的选项补全输入
                triggerAction: 'all',
                emptyText: '全部',
                selectOnFocus: true,
                forceSelection: true
            });

            var provinces = [
                [1, '北京'],
                [2, '上海']
            ];
            var cities = new Array();
            cities[1] = [
                [11, '海淀'],
                [22, '东城']
            ];
            cities[2] = [
                [33, '黄埔'],
                [44, '浦东'],
                [55, '静安']
            ];
            var comboProvinces = new Ext.form.ComboBox({
                store: new Ext.data.SimpleStore({
                    fields: ["provinceId", "provinceName"],
                    data: provinces
                }),
                listeners: {
                    select: function(combo, record, index) {
                        comboCities.clearValue();
                        comboCities.store.loadData(cities[record.data.provinceId]);
                    }
                },
                valueField: "provinceId",
                displayField: "provinceName",
                mode: 'local',
                forceSelection: true,
                blankText: '请选择省份',
                emptyText: '请选择省份',
                hiddenName: 'provinceId',
                editable: false,
                triggerAction: 'all',
                allowBlank: true,
                fieldLabel: '请选择省份',
                name: 'provinceId',
                width: 80
            });

            var comboCities = new Ext.form.ComboBox({
                store: new Ext.data.SimpleStore({
                    fields: ["cityId", 'cityName'],
                    data: []
                }),
                valueField: "cityId",
                displayField: "cityName",
                mode: 'local',
                forceSelection: true,
                blankText: '选择地区',
                emptyText: '选择地区',
                hiddenName: 'cityId',
                editable: false,
                triggerAction: 'all',
                allowBlank: true,
                fieldLabel: '选择地区',
                name: 'cityId',
                width: 80
            });

            var form = new Ext.form.FormPanel({
                region: 'center',
                labelWidth: 100,
                border: false,
                labelAlign: 'right',
                applyTo: 'local1',
                height: 200,
                width: 400,
                layout: 'form',
                items: [storeList, combo,comboProvinces,comboCities]
            });
        });
    </script>
</head>
<body>
<div id="local1"></div>
</body>
</html>